<template>
    <div id="app">
        <el-row>
            <el-col :span="18" :offset="3"><div class="grid-content">
                <span>
                    <div class="header">请核对查询的结果</div>
                </span>
<!--                <div class="quit">-->
<!--                    <el-link :underline="false" type="danger" @click="quit()">退出</el-link>-->
<!--                </div>-->

                <div v-for="item in data">
                    <el-card class="box-card" shadow="never">
                        <div class="yydh"><i class="el-icon-star-on"></i>提交编号：{{item.uuid}}</div>
                        <el-descriptions>
                            <el-descriptions-item label="姓名">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="部门">{{item.dept}}</el-descriptions-item>
                            <el-descriptions-item label="类别">{{item.sort}}</el-descriptions-item>
                            <el-descriptions-item label="标题">{{item.title}}</el-descriptions-item>
                            <el-descriptions-item label="提交时间">{{item.createtime}}</el-descriptions-item>
                        </el-descriptions>
                        <span class="qxdd">
                             <el-button type="primary" size="medium" round @click="selectDown(item.id)">下载病例单</el-button>
                        </span>
                    </el-card>
                </div>
                <div id="wuData" v-show="data.length == 0">暂无该患者数据！</div>
            </div></el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "queryRecord",
        data(){
            return{
                data:[],
                timer:null,
                dialogVisible2:false,
                isFlag:true,
                visitForm:{}
            }
        },
        created() {
            this.getParams();
        },
        methods: {

            selectDown(rid){
                this.$http.post("/excel/download?reservationId="+rid).then(res=>{
                    location.href="http://localhost:8088/excel/download?reservationId="+rid;
                });
            },

            getParams(){
                    this.data = this.$route.query.ruleForm;
            },
            quit(){
                clearTimeout(this.timer); //清除延迟执行
                this.timer = setTimeout(()=>{  //设置延迟执行
                    this.$router.push({path:"/index"})
                },1000);
            }
        },
    }
</script>

<style scoped>
    .imgl{
        float: left;
    }
    .yydh {width: 350px;height: 40px;margin-left: -20px;background-color: #77c588;border-radius: 15px;color: cornsilk;line-height: 40px;}
    .box-card{margin-bottom: 20px}
    .header{font-size: 28px;font-width: bolder;text-align: center;margin: 20px 0;}
    .qxdd{float: right;margin: -20px 20px 20px 0;}
    #wuData{height: 200px;line-height: 200px;font-size: 24px;color: crimson;text-align: center;}
    .quit{margin-top: -40px;float: right;color: chocolate;display: block;}
    html,body,#app{
        width: 100%;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }
    .box-card{
        margin: 0px auto;
        width: 1000px;
        height: 150px;
    }
    * {
        /*margin: 0;*/
        padding: 0;
        list-style: none;
        font-family: '微软雅黑';}
    img {vertical-align: top;}
    a {text-decoration: none;}
    a:hover {text-decoration: none;color: #538191;}

    .el-col {border-radius: 4px;}
    .bg-purple-dark {background: #538191;}
    .bg-purple {background: #fff;}
    .grid-content { min-height: 100px;}

    /********header***********/
    .header{line-height:100px;margin: 0px auto;width: 350px;height: 100px;}

    .header ul li:first-child {border-left: 1px solid #e4e4e4;}

    .header ul li {
        margin-top: 10px;
        position: relative;
        width: 20%;
        text-align: center;
        font-size: 20px;
        list-style-type: none;
        float: left;
        border-right: 1px solid #e4e4e4;
    }

    .header ul li a {
        color: #333;
        font-size: 20px;
        display: block;
        height: 100px;
        position: relative;
        z-index: 1;
    }
    .header ul li a .icon-nav {
        width: 37px;
        height: 32px;
        margin: 20px 0 0 0;
        display: inline-block;
    }
    .header ul li:hover{
        background-color: #009994;
        color: #fff;
    }
    .header ul li a:hover{
        color: #fff;
    }
    .header .nav-txt {
        display: block;
        font-size: 16px;
    }

    /***********menu**********/
    .nav{
        margin:0 auto;
        height: 55px;
        position:relative;
        padding:25px 0px 0px 15px;
    }
    .nav li{
        width:135px;
        float: left;
        position: relative;
    }
    .nav li.line{
        width:1px;
        padding-top:15px;
        display:block;
    }
    .nav li>a{
        display: block;
        font-size:18px;
        color: #fff;
        height: 55px;
        line-height: 55px;
        text-align: center;
    }

    .nav li.on>a,.nav li:hover>a{
        background-color:#6b86a0;
        color:#ffffff;
        font-weight:normal!important;
        border-radius-left-top:2px ;
    }

    .nav li.on,.nav li:hover .two-nav{
        background: #6b86a0;
        display: block;
        padding-top: 0px;
        margin-top: -1px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .two-nav{
        position: absolute;
        left: 0px;
        width: 150px;
        margin-top:-1px;
        z-index: 990;
        display: none;
    }
    .two-nav a{
        display: block;
        height: 45px;
        line-height:45px;
        text-align: center;
        color: #ffffff;
        font-size: 15px;
        background: #6b86a0;
    }

    .two-nav a:hover{
        background: #538191;
    }

    .el-carousel__item h3 {
        opacity: 0.75;
        line-height: 644px;
        margin: 0;
    }

    /***********ztzl**********/
    .con_two{width:100%;margin-top:45px;}
    .jz {width: 1280px;margin: 0 auto;}
    /*服务*/
    .xy_fw{width:1280px;height:395px;}
    .xy_fw_nav{width:1280px;height:74px;line-height:74px;}
    .xy_fw_nav h1{width:150px;font-size:20px;color:#538191;border-bottom:4px #f29503 solid;margin:0 auto;text-align:center;text-indent:0em;}
    .xy_fw_nav h2{width:150px;font-size:20px;color:#538191;border-bottom:4px #f29503 solid;margin:0 auto;text-align:center;text-indent:2em;}

    .xy_fw_font{width:1280px;}
    .xy_fw_font ul li{width:426px;float:left;padding-top:37px;text-align: center;}
    .xy_fw_font ul li h1{width:100px;height:85px;padding-top:15px;;background:#538191;border-radius: 100px;text-align:center;margin:0 auto;}
    .xy_fw_font ul li h1 img{-webkit-transition:all 4s ease-in-out; width: 60px; padding-top: 10px}
    .xy_fw_font ul li h1 img:hover{-webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg) ;
        -mo-transform:rotate(360deg) ;
        transform:rotate(360deg) ;}
    .xy_fw_font ul li span{line-height:46px;text-align:center;font-size:18px;}
    .post_bg {
        background: #e36521 !important;
    }

    /***********footer**********/
    #footer{width:100%;background:#538191;padding:20px 0px; height: 180px}
    .fot_bg{width:1300px;margin:0 auto;}
    .fot_bg_left{float:left;line-height:38px;padding:20px 0px;color:#ced6e4;padding-right:30px;}

    .fot_bg_left a{color:#fff!important;}
    .fot_bg_left span{pading-top:3px;}
    .fot_bg_mid{float:left;}
    .fot_bg_mid ul li{width:111px;float:left;padding-left:30px;text-align:center;}
    .fot_bg_mid ul li img{width:111px;height:111px;}
    .fot_bg_mid ul li span{line-height:50px;color:#fff;}


    .fot_bg_right{width:210px;float:left;}
    .fot_bg_right ul li{float:left;line-height:45px;padding-left:48px;font-size: 13px;}
    .fot_bg_right ul li a{color:#ced6e4;}



    /*******************/
    .yq-banner-inner {
        width: 100%;
        min-width: 1150px;
        height: 260px;
        display: block;
        text-align: center;
        background-size: cover;
        background: url(../../../../../assets/img/bg.png) no-repeat center center;
        background-size:100% 260px;
    }

    .gaga{
        margin: 10px auto;
    }
    .lala{
        width: 100%;}
</style>